<template>
  <div>
    <div class="interpret-container">
      <div class="interpret-header">
        <img
          src="https://fc-feed.cdn.bcebos.com/aix/aiAvatar.png"
          class="interpret-header-logo"
        />
        <div>智能数据分析</div>
      </div>
      <div class="interpret-content">
        <div>暂无分析建议~</div>
      </div>
    </div>
    <div class="fcRightBox">
      <div class="fcHeader-container fcHeader-container-custom-dash">
        <div class="">
          <div class="contentHeader">
            <div
              style="
                width: 370px;
                display: flex;
                align-content: center;
                justify-content: space-between;
              "
            >
              <el-button class="buttonAdd" @click="btnXiu"
                >新建人群名称</el-button
              >
              <el-input
                placeholder="请搜索人群名称"
                style="width: 200px"
                v-model="form.crowdName"
                @change="queryList"
              ></el-input>
              <el-button class="buttonBtn" @click="btnXiu">筛选</el-button>
            </div>
            <div
              style="
                min-width: 600px;
                display: flex;
                align-content: center;
                justify-content: space-between;
              "
            >
              <button
                @click="btnXiu"
                style="width: 34px; height: 32px"
                type="button"
                name=""
                class="one-button refresh-operation one-main one-button-normal one-button-medium"
              >
                <span
                  ><div
                    class="one-loading-nested-loading one-loading-nested-loading-normal"
                  >
                    <div class="one-loading-container">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 24 24"
                        min-width="14"
                        height="14"
                        class="dls-icon"
                        focusable="false"
                      >
                        <path
                          fill="currentColor"
                          d="M11.973 1C5.953 1 1.092 5.936 1.092 12h2c0-4.982 3.987-9 8.881-9 2.717 0 5.153 1.237 6.785 3.192l-.576.333a.5.5 0 0 0 .048.89l2.803 1.241a.5.5 0 0 0 .698-.391l.413-3.098a.5.5 0 0 0-.746-.499l-.887.512C18.521 2.638 15.438 1 11.973 1zm11.119 11c0 6.064-4.861 11-10.882 11-3.465 0-6.548-1.637-8.538-4.18l-.887.512a.5.5 0 0 1-.746-.5l.413-3.097a.5.5 0 0 1 .698-.391l2.804 1.24a.5.5 0 0 1 .047.89l-.576.334C7.057 19.764 9.493 21 12.21 21c4.894 0 8.882-4.018 8.882-9h2z"
                        ></path>
                      </svg>
                    </div></div
                ></span>
              </button>
              <el-date-picker class="custom-date-picker" format="yyyy/MM/dd"
                style="width: 70%; width: 200px"
                size="small"
                v-model="timerArray"
                @change="queryList"
                value-format="yyyy-MM-dd"
                :picker-options="pickerOptions"
                :clearable="false"
                range-separator="~"
                type="daterange"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
              <el-button class="buttonBtn" @click="btnXiu">自定义列</el-button>
              <el-button class="buttonBtn" @click="handleTabClick">重置列宽</el-button>
              <el-select
                style="width: 150px"
                v-model="value"
                placeholder="请选择"
                class="select-with-prefix1"
              >
                <el-option
                  v-for="item in options2"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
          </div>
          <el-table
            :data="tableList"
            style="width: 100%; background: #ebedf5"
            :default-sort="{ prop: 'date', order: 'descending' }"
          >
            <el-table-column fixed type="selection" min-width="55">
            </el-table-column>
            <el-table-column
              fixed
              prop="crowdName"
              label="人群名称"
              sortable
              min-width="180"
            >
            </el-table-column>

            <el-table-column
              prop="crowdType"
              label="人群类别"
              sortable
              min-width="180"
            >
            </el-table-column>
            <el-table-column prop="putType" label="类型"> </el-table-column>
            <el-table-column prop="status" label="状态" sortable min-width="180">
            </el-table-column>
            <el-table-column prop="plan" label="计划" sortable min-width="180">
            </el-table-column>
            <el-table-column
              prop="bidCoefficient"
              label="点击出价系数"
              min-width="220"
            >
            </el-table-column>
            <el-table-column
              prop="consumption"
              label="消费"
              sortable
              min-width="180"
            >
            </el-table-column>
            <el-table-column
              prop="promotionType"
              label="推广类型"
              sortable
              min-width="180"
            >
            </el-table-column>
          </el-table>
          <el-pagination background
            style="text-align: right; margin-top: 40px"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="form.pageNum"
            :page-size="form.pageSize"
            :page-sizes="[10, 20, 30, 40, 50, 60, 70, 80, 90, 100]"
            layout="sizes, prev, pager, next,jumper"
            :total="form.total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ItemMixins from "./item.mixins";
import * as echarts from "echarts";
import { getPromotionCrowdList } from "@/services/model/managecenter";

export default {
  mixins: [ItemMixins],
  data() {
    return {
      isToggleStatus: false,

      chart: null,
      value: "下载",
      sumTypeList: [
        {
          value: "消费",
          label: "消费",
        },
        {
          value: "展示",
          label: "展示",
        },
        {
          value: "点击",
          label: "点击",
        },
        {
          value: "平均点击价格",
          label: "平均点击价格",
        },
      ],
      options2: [
        {
          value: "下载",
          label: "下载",
        },
        {
          value: "发送邮箱",
          label: "发送邮箱",
        },
        {
          value: "下载设置",
          label: "下载设置",
        },
      ],
      options: [
        {
          value: 0,
          label: "合计",
        },
        {
          value: 1,
          label: "分时",
        },
        {
          value: 2,
          label: "分日",
        },
        {
          value: 3,
          label: "分周",
        },
        {
          value: 4,
          label: "分月",
        },
      ],
      isSelect: "账户整体",
      activeName: "整体走势",
    };
  },
  methods: {
    async queryList() {
      this.form.createTime = this.formatDate(this.timerArray[0]);
      this.form.updateTime = this.formatDate(this.timerArray[1]);

      let res = await getPromotionCrowdList(this.form);
       const modifiedArray = this.replaceNullWithDash( res.rows);
                this.tableList = modifiedArray|| [];
       this.form.total = Math.ceil(Number(res.total) );;
    },

    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
  mounted() {
    this.queryList();
  },
};
</script>
<style>
</style>
<style scoped lang="less">
.fcRightBox {
  height: 100%;

  .fcHeader {
    background: #fff;
    border-radius: 6px;
    padding: 16px 24px 20px;
    margin-bottom: 24px;

    .fcHeader-title-container {
      position: relative;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;

      .left-part {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;

        .title {
          font-size: 20px;
          color: #282c33;
        }

        .refresh-data-time {
          display: inline-block;
          margin-bottom: 4px;
        }
      }

      .right-part {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;

        .baidu-market-tip {
          color: #a8b0bf;
          font-size: 12px;

          .baidu-market-name {
            color: #0052cc;
          }
        }

        .fcHeader-date-pick-container {
          margin-left: 12px;
          display: flex;
          flex-wrap: wrap;
          justify-content: flex-start;
          align-items: center;

          /deep/ .el-checkbox {
            margin-left: 12px;
          }
        }
      }
    }
  }

  .fcHeader-container-custom-dash {
    border-top-right-radius: 0;
    border-top-left-radius: 0;
  }

  .fcHeader-container {
    position: relative;
    background-color: rgb(255, 255, 255);
    padding: 0px 24px 24px;
    border-radius: 6px;
    margin-bottom: 42px;

    .fcHeader-container-title-box {
      position: absolute;
      right: 24px;
      top: 20px;
      height: 28px;
      display: flex;
      align-items: center;

      .fcHeader-container-title-tip {
        font-size: 12px;
        color: #a8b0bf;
        z-index: 9;
      }
    }
  }

  .account-report-radio-container {
    width: calc(100% - 48px);
    display: flex;

    overflow: auto;

    .account-report-radio-card {
      min-width: 208px;
      padding: 12px 16px;
      border-radius: 6px;
      border: 1px solid #c4daff;
      background: #fff;
      margin-right: 16px;
      cursor: pointer;
      color: #545b66;
      font-size: 14px;
      font-weight: 400;
      line-height: 20px;

      .account-report-radio-card-base {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .account-report-radio-card-base-cost {
          display: flex;
          align-items: center;
          color: #282c33;
          font-weight: 500;

          .account-report-radio-card-base-cost-num {
            font-size: 20px;
            line-height: 28px;
            margin: 0 4px;
          }
        }
      }
    }

    .account-report-radio-card-selected {
      border: 1px solid #0054e6;
      color: #0054e6;

      .account-report-radio-card-base-cost {
        color: #0054e6;
      }
    }
  }
}
</style>
<style scoped>
.dashboard .box-card {
  margin-bottom: 20px;
}

.dashboard .text-item {
  padding: 20px 0;
  text-align: center;
}

.dashboard .number {
  font-size: 24px;
  color: #333;
}

.dashboard .change {
  font-size: 14px;
  color: #333;
}

.dashboard .change el-icon {
  color: #67c23a;
}

.chart {
  width: 100%;
}

.contentHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 24px;
  padding-top: 24px;
  background-color: rgb(255, 255, 255);

  .el-input__inner {
    height: 32px;
    line-height: 32px;
  }
}
.contentHeader_right {
  min-width: 300px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.buttonAdd {
  background: #0054e6;
  color: white;
  border-radius: 4px;
  font-size: 14px;
  padding: 0 16px;
  height: 32px;
}

.buttonBtn {
  background: #e2e6f0;
  border-radius: 4px;
  font-size: 14px;
  padding: 0 16px;
  height: 32px;
}

.refresh-operation {
  width: 32px;
  align-items: center;
}

.one-button-normal {
  background-color: #ebedf5;
  color: rgba(19, 22, 26, 0.9);
  border: 1px solid transparent;
}

.one-button-medium {
  font-size: 14px;
}

.interpret-container {
  width: 100%;
  border-radius: 6px;
  border: 2px solid #fff;
  box-sizing: border-box;
  padding: 30px;
  background-image: linear-gradient(to bottom right, #bfe8ff -50%, #fff 35%);
  background-color: #fff;
  background-repeat: no-repeat;
  margin-bottom: 8px;
}
.interpret-header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 16px;
  font-weight: bold;
}
.interpret-container .interpret-header-logo {
  width: 21px;
  height: 21px;
  margin-right: 10px;
}
.interpret-container .interpret-content {
  margin-top: 10px;
  border-radius: 10px;
  border-left: 2px solid #729cfe;
  background: #e5eeff;
  box-sizing: border-box;
  padding: 10px 30px;
}
.interpret-container .interpret-content > div::marker {
  color: #729cfe;
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
  text-transform: none;
  text-indent: 0px !important;
  text-align: start !important;
  text-align-last: start !important;
}
</style>
